<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>服务列表 - 社交服务平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            padding-bottom: 65px;
        }
        
        /* 顶部导航 */
        .top-nav {
            background-color: white;
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .nav-back {
            color: #333;
            text-decoration: none;
            font-size: 20px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .nav-title {
            font-size: 17px;
            font-weight: 500;
            flex: 1;
            text-align: center;
        }
        
        .nav-filter {
            color: #333;
            text-decoration: none;
            font-size: 20px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 搜索栏 */
        .search-bar {
            padding: 10px 16px;
            background-color: white;
            border-bottom: 1px solid #eee;
        }
        
        .search-container {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 20px;
            border: 1px solid #eee;
            background-color: #f5f5f5;
            font-size: 14px;
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            font-size: 16px;
        }
        
        /* 服务分类标签 */
        .category-tabs {
            display: flex;
            background-color: white;
            border-bottom: 1px solid #eee;
            overflow-x: auto;
            scrollbar-width: none;
            position: sticky;
            top: 112px;
            z-index: 99;
        }
        
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .category-tab {
            padding: 10px 16px;
            font-size: 15px;
            color: #666;
            text-decoration: none;
            white-space: nowrap;
            border-bottom: 2px solid transparent;
        }
        
        .category-tab.active {
            color: #2196f3;
            border-bottom-color: #2196f3;
            font-weight: 500;
        }
        
        /* 服务列表容器 */
        .services-container {
            padding: 8px;
        }
        
        /* 服务卡片基础样式 */
        .service-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            text-decoration: none;
            color: #333;
            margin-bottom: 10px;
            transition: transform 0.2s, box-shadow 0.2s;
            display: flex;
            flex-direction: column;
        }
        
        .service-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        /* 服务图片容器 */
        .service-media {
            position: relative;
            width: 100%;
        }
        
        /* 无图服务 */
        .no-media {
            padding: 16px;
            display: flex;
            align-items: center;
        }
        
        .service-icon {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            background-color: #e3f2fd;
            color: #2196f3;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        /* 单图服务 */
        .single-media {
            height: 180px;
        }
        
        .single-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        /* 多图服务 */
        .multi-media {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr;
            height: 120px;
            gap: 2px;
        }
        
        .multi-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        /* 服务标签 */
        .service-tag {
            position: absolute;
            top: 8px;
            left: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            z-index: 10;
        }
        
        /* 服务信息容器 */
        .service-info {
            padding: 12px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        /* 服务标题 */
        .service-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 6px;
            line-height: 1.4;
        }
        
        /* 服务描述 */
        .service-description {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex-grow: 1;
        }
        
        /* 服务提供者信息 */
        .service-provider {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .provider-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 8px;
        }
        
        .provider-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .provider-name {
            font-size: 13px;
            color: #333;
            font-weight: 500;
        }
        
        /* 服务元数据 */
        .service-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            color: #999;
        }
        
        .service-rating {
            display: flex;
            align-items: center;
        }
        
        .service-rating i {
            color: #faad14;
            font-size: 12px;
            margin-right: 4px;
        }
        
        .service-price {
            color: #2196f3;
            font-weight: 600;
        }
        
        .service-distance {
            display: flex;
            align-items: center;
        }
        
        .service-distance i {
            font-size: 12px;
            margin-right: 4px;
        }
        
        /* 服务标签组 */
        .service-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 8px;
        }
        
        .service-small-tag {
            background-color: #e3f2fd;
            color: #2196f3;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 4px;
        }
        
        /* 筛选面板 */
        .filter-panel {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 80%;
            max-width: 300px;
            background-color: white;
            z-index: 101;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            overflow-y: auto;
        }
        
        .filter-panel.show {
            transform: translateX(0);
        }
        
        .filter-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 100;
            display: none;
        }
        
        .filter-overlay.show {
            display: block;
        }
        
        .filter-header {
            padding: 16px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .filter-title {
            font-size: 17px;
            font-weight: 600;
        }
        
        .close-filter {
            background: none;
            border: none;
            font-size: 20px;
            color: #666;
        }
        
        .filter-section {
            padding: 16px;
            border-bottom: 1px solid #eee;
        }
        
        .filter-section-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-option {
            background-color: #f5f5f5;
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 13px;
            color: #666;
            cursor: pointer;
            white-space: nowrap;
        }
        
        .filter-option.active {
            background-color: #2196f3;
            color: white;
            border-color: #2196f3;
        }
        
        .price-range {
            display: flex;
            gap: 10px;
            margin-top: 8px;
        }
        
        .price-input {
            flex: 1;
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid #eee;
            font-size: 13px;
        }
        
        .filter-actions {
            padding: 16px;
            display: flex;
            gap: 10px;
        }
        
        .filter-btn {
            flex: 1;
            padding: 10px;
            border-radius: 6px;
            font-size: 15px;
            font-weight: 500;
            text-align: center;
        }
        
        .reset-filter {
            background-color: #f5f5f5;
            color: #666;
            border: 1px solid #eee;
        }
        
        .confirm-filter {
            background-color: #2196f3;
            color: white;
            border: none;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            padding: 6px 0;
            z-index: 90;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            text-decoration: none;
            font-size: 10px;
        }
        
        .nav-item.active {
            color: #2196f3;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 3px;
        }
        
        /* 加载更多 */
        .load-more {
            padding: 15px;
            text-align: center;
        }
        
        .load-more-btn {
            background-color: white;
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 8px 16px;
            font-size: 14px;
            color: #666;
            cursor: pointer;
        }
        
        /* 空状态 */
        .empty-state {
            padding: 60px 20px;
            text-align: center;
            color: #999;
        }
        
        .empty-state i {
            font-size: 60px;
            margin-bottom: 15px;
            color: #eee;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <a href="#" class="nav-back">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div class="nav-title">服务列表</div>
        <a href="#" class="nav-filter" id="open-filter">
            <i class="fas fa-filter"></i>
        </a>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
        <div class="search-container">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索服务、技能或提供者...">
        </div>
    </div>
    
    <!-- 服务分类标签 -->
    <div class="category-tabs">
        <a href="#" class="category-tab active">全部服务</a>
        <a href="#" class="category-tab">家政服务</a>
        <a href="#" class="category-tab">维修服务</a>
        <a href="#" class="category-tab">教育培训</a>
        <a href="#" class="category-tab">健康护理</a>
        <a href="#" class="category-tab">运动健身</a>
        <a href="#" class="category-tab">摄影摄像</a>
        <a href="#" class="category-tab">设计创意</a>
    </div>
    
    <!-- 服务列表容器 -->
    <div class="services-container" id="services-container">
        <!-- 1. 无图服务 -->
        <a href="#" class="service-card">
            <div class="service-media no-media">
                <div class="service-icon">
                    <i class="fas fa-hammer"></i>
                </div>
                <div class="service-title">家电维修上门服务 - 冰箱/洗衣机/空调</div>
            </div>
            <div class="service-info">
                <div class="service-description">
                    专业家电维修20年经验，提供上门检测维修服务，修不好不收费，配件质量保证
                </div>
                <div class="service-tags">
                    <span class="service-small-tag">维修</span>
                    <span class="service-small-tag">上门</span>
                    <span class="service-small-tag">家电</span>
                </div>
                <div class="service-provider">
                    <div class="provider-avatar">
                        <img src="https://picsum.photos/id/64/100/100" alt="服务提供者头像">
                    </div>
                    <div class="provider-name">王师傅家电维修</div>
                </div>
                <div class="service-meta">
                    <div class="service-rating">
                        <i class="fas fa-star"></i> 4.9
                    </div>
                    <div class="service-price">¥80起</div>
                    <div class="service-distance">
                        <i class="fas fa-map-marker-alt"></i> 1.2km
                    </div>
                </div>
            </div>
        </a>
        
        <!-- 2. 单图服务 -->
        <a href="#" class="service-card">
            <div class="service-media single-media">
                <img src="https://picsum.photos/id/26/800/400" alt="瑜伽课程">
                <div class="service-tag">热门</div>
            </div>
            <div class="service-info">
                <div class="service-title">一对一私教瑜伽课程 - 减脂塑形/康复理疗</div>
                <div class="service-description">
                    专业瑜伽教练上门指导，根据个人体质定制课程，适合初学者和有一定基础的学员
                </div>
                <div class="service-tags">
                    <span class="service-small-tag">瑜伽</span>
                    <span class="service-small-tag">私教</span>
                    <span class="service-small-tag">上门</span>
                </div>
                <div class="service-provider">
                    <div class="provider-avatar">
                        <img src="https://picsum.photos/id/65/100/100" alt="服务提供者头像">
                    </div>
                    <div class="provider-name">林教练瑜伽工作室</div>
                </div>
                <div class="service-meta">
                    <div class="service-rating">
                        <i class="fas fa-star"></i> 4.8
                    </div>
                    <div class="service-price">¥180/节</div>
                    <div class="service-distance">
                        <i class="fas fa-map-marker-alt"></i> 3.5km
                    </div>
                </div>
            </div>
        </a>
        
        <!-- 3. 多图服务 -->
        <a href="#" class="service-card">
            <div class="service-media multi-media">
                <img src="https://picsum.photos/id/42/300/300" alt="家政清洁服务1">
                <img src="https://picsum.photos/id/43/300/300" alt="家政清洁服务2">
                <img src="https://picsum.photos/id/44/300/300" alt="家政清洁服务3">
                <div class="service-tag">特惠</div>
            </div>
            <div class="service-info">
                <div class="service-title">专业家庭保洁服务 - 日常清洁/深度清洁</div>
                <div class="service-description">
                    持证上岗，自带清洁工具和用品，全屋清洁/局部清洁可选，不满意免费返工
                </div>
                <div class="service-tags">
                    <span class="service-small-tag">家政</span>
                    <span class="service-small-tag">保洁</span>
                    <span class="service-small-tag">专业</span>
                </div>
                <div class="service-provider">
                    <div class="provider-avatar">
                        <img src="https://picsum.photos/id/66/100/100" alt="服务提供者头像">
                    </div>
                    <div class="provider-name">洁净家服务团队</div>
                </div>
                <div class="service-meta">
                    <div class="service-rating">
                        <i class="fas fa-star"></i> 4.7
                    </div>
                    <div class="service-price">¥120/小时</div>
                    <div class="service-distance">
                        <i class="fas fa-map-marker-alt"></i> 2.8km
                    </div>
                </div>
            </div>
        </a>
        
        <!-- 4. 无图服务 -->
        <a href="#" class="service-card">
            <div class="service-media no-media">
                <div class="service-icon">
                    <i class="fas fa-camera"></i>
                </div>
                <div class="service-title">专业摄影服务 - 人像/产品/活动拍摄</div>
            </div>
            <div class="service-info">
                <div class="service-description">
                    资深摄影师，提供各类拍摄服务，含后期修图，快速出片，可上门或外景拍摄
                </div>
                <div class="service-tags">
                    <span class="service-small-tag">摄影</span>
                    <span class="service-small-tag">人像</span>
                    <span class="service-small-tag">产品</span>
                </div>
                <div class="service-provider">
                    <div class="provider-avatar">
                        <img src="https://picsum.photos/id/67/100/100" alt="服务提供者头像">
                    </div>
                    <div class="provider-name">光影摄影工作室</div>
                </div>
                <div class="service-meta">
                    <div class="service-rating">
                        <i class="fas fa-star"></i> 4.9
                    </div>
                    <div class="service-price">¥300起</div>
                    <div class="service-distance">
                        <i class="fas fa-map-marker-alt"></i> 5.3km
                    </div>
                </div>
            </div>
        </a>
        
        <!-- 5. 单图服务 -->
        <a href="#" class="service-card">
            <div class="service-media single-media">
                <img src="https://picsum.photos/id/96/800/400" alt="家教服务">
            </div>
            <div class="service-info">
                <div class="service-title">中小学全科家教 - 一对一辅导/作业辅导</div>
                <div class="service-description">
                    985高校在读学生，擅长中小学数学、英语辅导，耐心负责，提分效果显著
                </div>
                <div class="service-tags">
                    <span class="service-small-tag">教育</span>
                    <span class="service-small-tag">家教</span>
                    <span class="service-small-tag">一对一</span>
                </div>
                <div class="service-provider">
                    <div class="provider-avatar">
                        <img src="https://picsum.photos/id/68/100/100" alt="服务提供者头像">
                    </div>
                    <div class="provider-name">张老师家教</div>
                </div>
                <div class="service-meta">
                    <div class="service-rating">
                        <i class="fas fa-star"></i> 4.8
                    </div>
                    <div class="service-price">¥80/小时</div>
                    <div class="service-distance">
                        <i class="fas fa-map-marker-alt"></i> 4.1km
                    </div>
                </div>
            </div>
        </a>
        
        <!-- 6. 多图服务 -->
        <a href="#" class="service-card">
            <div class="service-media multi-media">
                <img src="https://picsum.photos/id/21/300/300" alt="室内设计服务1">
                <img src="https://picsum.photos/id/22/300/300" alt="室内设计服务2">
                <img src="https://picsum.photos/id/23/300/300" alt="室内设计服务3">
                <div class="service-tag">专业</div>
            </div>
            <div class="service-info">
                <div class="service-title">室内设计与装修 - 家装/工装/软装设计</div>
                <div class="service-description">
                    专业设计团队，提供从设计到施工一站式服务，多年经验，免费上门测量
                </div>
                <div class="service-tags">
                    <span class="service-small-tag">设计</span>
                    <span class="service-small-tag">装修</span>
                    <span class="service-small-tag">全屋</span>
                </div>
                <div class="service-provider">
                    <div class="provider-avatar">
                        <img src="https://picsum.photos/id/69/100/100" alt="服务提供者头像">
                    </div>
                    <div class="provider-name">宜居空间设计</div>
                </div>
                <div class="service-meta">
                    <div class="service-rating">
                        <i class="fas fa-star"></i> 4.6
                    </div>
                    <div class="service-price">¥500/㎡起</div>
                    <div class="service-distance">
                        <i class="fas fa-map-marker-alt"></i> 7.2km
                    </div>
                </div>
            </div>
        </a>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more">
        <button class="load-more-btn" id="load-more-btn">
            加载更多 <i class="fas fa-spinner fa-spin" style="display: none;"></i>
        </button>
    </div>
    
    <!-- 空状态（默认隐藏） -->
    <div class="empty-state" id="empty-state" style="display: none;">
        <i class="fas fa-search"></i>
        <h5>未找到相关服务</h5>
        <p>尝试调整筛选条件或搜索关键词</p>
    </div>
    
    <!-- 筛选面板 -->
    <div class="filter-panel" id="filter-panel">
        <div class="filter-header">
            <div class="filter-title">筛选条件</div>
            <button class="close-filter" id="close-filter">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="filter-section">
            <div class="filter-section-title">价格范围</div>
            <div class="filter-options">
                <div class="filter-option active">全部价格</div>
                <div class="filter-option">50元以下</div>
                <div class="filter-option">50-100元</div>
                <div class="filter-option">100-200元</div>
                <div class="filter-option">200-500元</div>
                <div class="filter-option">500元以上</div>
            </div>
            <div class="price-range">
                <input type="number" class="price-input" placeholder="最低价" min="0">
                <input type="number" class="price-input" placeholder="最高价" min="0">
            </div>
        </div>
        
        <div class="filter-section">
            <div class="filter-section-title">服务距离</div>
            <div class="filter-options">
                <div class="filter-option active">不限</div>
                <div class="filter-option">1km内</div>
                <div class="filter-option">3km内</div>
                <div class="filter-option">5km内</div>
                <div class="filter-option">10km内</div>
            </div>
        </div>
        
        <div class="filter-section">
            <div class="filter-section-title">服务评分</div>
            <div class="filter-options">
                <div class="filter-option active">不限</div>
                <div class="filter-option">4.5分以上</div>
                <div class="filter-option">4分以上</div>
                <div class="filter-option">3.5分以上</div>
            </div>
        </div>
        
        <div class="filter-section">
            <div class="filter-section-title">服务特色</div>
            <div class="filter-options">
                <div class="filter-option">上门服务</div>
                <div class="filter-option">专业认证</div>
                <div class="filter-option">可开发票</div>
                <div class="filter-option">周末可用</div>
                <div class="filter-option">新用户优惠</div>
            </div>
        </div>
        
        <div class="filter-actions">
            <button class="filter-btn reset-filter" id="reset-filter">重置</button>
            <button class="filter-btn confirm-filter" id="confirm-filter">确认</button>
        </div>
    </div>
    
    <!-- 筛选遮罩层 -->
    <div class="filter-overlay" id="filter-overlay"></div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-concierge-bell"></i>
            <span>服务</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-plus-circle"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-message"></i>
            <span>消息</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const filterPanel = document.getElementById('filter-panel');
            const filterOverlay = document.getElementById('filter-overlay');
            const openFilterBtn = document.getElementById('open-filter');
            const closeFilterBtn = document.getElementById('close-filter');
            const confirmFilterBtn = document.getElementById('confirm-filter');
            const resetFilterBtn = document.getElementById('reset-filter');
            const categoryTabs = document.querySelectorAll('.category-tab');
            const loadMoreBtn = document.getElementById('load-more-btn');
            const searchInput = document.querySelector('.search-input');
            const filterOptions = document.querySelectorAll('.filter-option');
            
            // 打开筛选面板
            openFilterBtn.addEventListener('click', function() {
                filterPanel.classList.add('show');
                filterOverlay.classList.add('show');
                document.body.style.overflow = 'hidden';
            });
            
            // 关闭筛选面板
            function closeFilter() {
                filterPanel.classList.remove('show');
                filterOverlay.classList.remove('show');
                document.body.style.overflow = '';
            }
            
            closeFilterBtn.addEventListener('click', closeFilter);
            filterOverlay.addEventListener('click', closeFilter);
            
            // 筛选选项点击
            filterOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 如果是同一组中的单选选项，移除同组其他选项的active类
                    const parentSection = this.closest('.filter-section');
                    if (parentSection.querySelector('.filter-section-title').textContent !== '服务特色') {
                        parentSection.querySelectorAll('.filter-option').forEach(opt => {
                            opt.classList.remove('active');
                        });
                    }
                    
                    // 切换当前选项的active类
                    this.classList.toggle('active');
                });
            });
            
            // 确认筛选
            confirmFilterBtn.addEventListener('click', function() {
                // 在实际应用中，这里会收集筛选条件并应用
                closeFilter();
                // 模拟筛选效果
                showLoading();
                setTimeout(() => {
                    hideLoading();
                }, 800);
            });
            
            // 重置筛选
            resetFilterBtn.addEventListener('click', function() {
                filterOptions.forEach(option => {
                    // 只激活第一个选项
                    option.classList.toggle('active', option === option.parentElement.firstElementChild);
                });
                
                // 清空价格输入框
                document.querySelectorAll('.price-input').forEach(input => {
                    input.value = '';
                });
            });
            
            // 分类标签切换
            categoryTabs.forEach(tab => {
                tab.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    categoryTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 模拟分类筛选
                    showLoading();
                    setTimeout(() => {
                        hideLoading();
                    }, 800);
                });
            });
            
            // 搜索功能
            searchInput.addEventListener('input', function() {
                // 模拟搜索延迟
                clearTimeout(this.searchTimer);
                this.searchTimer = setTimeout(() => {
                    const searchTerm = this.value.trim();
                    if (searchTerm.length > 0 || searchTerm.length === 0) {
                        showLoading();
                        setTimeout(() => {
                            hideLoading();
                        }, 500);
                    }
                }, 500);
            });
            
            // 加载更多功能
            loadMoreBtn.addEventListener('click', function() {
                const spinner = this.querySelector('i');
                spinner.style.display = 'inline-block';
                this.disabled = true;
                
                // 模拟加载延迟
                setTimeout(() => {
                    // 复制现有服务卡片作为新内容
                    const servicesContainer = document.getElementById('services-container');
                    const existingCards = document.querySelectorAll('.service-card');
                    const randomIndex = Math.floor(Math.random() * existingCards.length);
                    const clone = existingCards[randomIndex].cloneNode(true);
                    
                    // 修改一些内容以模拟新服务
                    const randomId = Math.floor(Math.random() * 100);
                    const img = clone.querySelector('img');
                    if (img) {
                        img.src = `https://picsum.photos/id/${randomId}/300/300`;
                    }
                    
                    servicesContainer.appendChild(clone);
                    
                    spinner.style.display = 'none';
                    this.disabled = false;
                }, 1500);
            });
            
            // 显示/隐藏加载状态
            function showLoading() {
                const servicesContainer = document.getElementById('services-container');
                const emptyState = document.getElementById('empty-state');
                
                servicesContainer.style.opacity = '0.5';
                emptyState.style.display = 'none';
                loadMoreBtn.disabled = true;
            }
            
            function hideLoading() {
                const servicesContainer = document.getElementById('services-container');
                servicesContainer.style.opacity = '1';
                loadMoreBtn.disabled = false;
            }
        });
    </script>
</body>
</html>

